<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title="'福分查看'"
    :body-style="{ paddingBottom: '80px' }"
    :maskClosable="false"
    width="40%"
    :close="onClose"
  >
    <div class="drawer-content">
      <div class="drawer-content-left">
        <img :src="vdata.saveObject.headPic" alt="">
      </div>
      <div class="drawer-content-right">
        <p style="font-size: 18px;font-weight: 600;">客户信息</p>
        <p>昵称：{{ vdata.saveObject.nickName }}</p>
        <p>当前福分：{{ vdata.saveObject.newScore }}</p>
        <p>已使用福分：{{ vdata.saveObject.alreadyScore }}</p>
      </div>
    </div>
    <p style="font-size: 18px;font-weight: 600;">积分变更记录</p>

    <a-card class="good-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="resetFunc" searchConditionNum="6">
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['flag']" placeholder="变动类型">
            <a-select-option value="0"> 新增 </a-select-option>
            <a-select-option value="1">消耗 </a-select-option>
            <a-select-option value="2"> 过期 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-date-picker v-model:value="searchData['startScoreTime']" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :placeholder="'变动开始时间'" style="width: 100%;" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-date-picker v-model:value="searchData['endScoreTime']" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :placeholder="'变动结束时间'" style="width: 100%;" />
        </a-form-item>
      </GzSearchForm>
      <GzTable
        v-if="vdata.visible"
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        :scrollX="800"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_FANS_LIST_INFO_EXPT_REAL')" type="primary" @click="exportFunc">
            <plus-outlined />导出
          </a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'flag'">
            <span v-if="record.flag==0">新增</span>
            <span v-if="record.flag==1">消耗</span>
            <span v-if="record.flag==2">过期</span>
          </template>
        </template>
      </GzTable>
    </a-card>
  </a-drawer>
</template>
<script setup>
import { reactive, ref, defineProps, getCurrentInstance } from 'vue'
import {$getFansScoreRecord,$exportFansScoreRecord} from '@/api/fansManage/fansList/index'

const { $infoBox } = getCurrentInstance()?.appContext.config.globalProperties

const props = defineProps({
  callback: {
    type: Function,
    default: () => {}
  }
})
const searchData = reactive({
  
})
const infoTableRef = ref()

const vdata = reactive({
  fansId: '',
  visible: false,
  saveObject:{},
  
})
const tableColumns = reactive([
  { key: 'flag', title: '变动类型', dataIndex: '变动人', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'score', title: '变动福分', dataIndex: 'score', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'name', title: '变动原因', dataIndex: 'name', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'createdAt', title: '变动时间', dataIndex: 'createdAt', width: 140, minWidth: 140, maxWidth: 250, },
])

// 查看table数据
function reqTableDataFunc(params) {
   console.log('params', params)
   
    return new Promise((resolve) => {
    $getFansScoreRecord(params)
      .then((res) => {        
        vdata.saveObject.alreadyScore = res.records[0]?.alreadyScore
        vdata.saveObject.newScore = res.records[0]?.newScore
        resolve(res)
      })
  })
}
// 搜索
function searchFunc() {  
  infoTableRef.value.refTable(true)
}

function show(record,fansId){
    // 重置搜索条件
  searchData.startScoreTime = ''
  searchData.endScoreTime = ''
  searchData.flag = null
  vdata.saveObject = record
  searchData.fansId = fansId
  vdata.visible = true
}

function onClose() {
  vdata.visible = false
}
function resetFunc() {
  searchData.startScoreTime = ''
  searchData.endScoreTime = ''
  searchData.flag = null
  infoTableRef.value.refTable(true)
}

// 导出
function exportFunc() {
  $exportFansScoreRecord({...searchData}).then((res) => {
    if (res) {
  const a = document.createElement('a')
  a.href = res
  a.download = '福分明细.xlsx' // 设置下载文件名
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  $infoBox.message.success('导出成功')
    } else {
      $infoBox.error('导出失败，请稍后再试！')
    }
  })
}
defineExpose({
  show
})


</script>
<style lang="less" scoped>
  .drawer-content{
    padding: 20px;
    display: flex;
    .drawer-content-left{
      margin-right: 30px;
      img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }
  }
  .good-card{
   ::v-deep(.table-search-item){
     width: calc(100% / 3) !important;
    }
  }
   

</style>